<template>
  <div v-if="getShow">
    <LoginFormTitle class="enter-x" title="二维码登录" />
    <div class="enter-x min-w-64 min-h-64">
      <qrcode-vue
        :value="qrcodeData.value"
        :size="qrcodeData.size"
        class="flex justify-center enter-x xl:justify-start"
      />
      <a-divider class="enter-x">扫码后点击"确认"，即可完成登录</a-divider>
      <a-button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
        返回
      </a-button>
    </div>
  </div>
</template>
<script>
import LoginFormTitle from './LoginFormTitle.vue';
import QrcodeVue from 'qrcode.vue';

export default {
  name: 'QrCodeForm',
  components: {
    LoginFormTitle,
    QrcodeVue
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    getShow: {
      get: function() {
        return this.visible;
      },
      set: function(val) {
        this.$emit('update:visible', val);
      }
    }
  },
  data() {
    return {
      qrcodeData: {
        size: 220,
        value: 'http://wwww.baidu.com'
      },
      getFormRules: {}
    };
  },
  created() {},
  methods: {
    handleBackLogin() {
      this.$emit('backLogin')
    }
  }
};
</script>
